<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta name="referrer" content="no-referrer" />
    <!-- icon图标 -->
    <link rel="icon" href="./static/image/kkb.png">
    <!-- swiper插件 -->
    <link rel="stylesheet" href="./static/swiper/swiper-bundle.min.css">
    <script src="./static/swiper/swiper-bundle.min.js"></script>
    <!-- 全局样式 -->
    <link rel="stylesheet" href="./static/style.css">
    <!-- 弹性布局 -->
    <script src="./static/flexable.js"></script>
    <!-- Vue3.0 -->
    <script src="https://unpkg.com/vue@next"></script>


</head>

<body>
    <div id="app">
        <!-- 视频翻页 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="v in videos" @click="dublePlay(v.id,$event)">
                    <!-- 播放按钮 -->
                    <img v-show="!v.playing" class="play-btn" src="./static/image/play.png" alt="">

                    <!-- 头像 -->
                    <img :src="v.author" class="author" alt="" srcset="">
                    <!-- 获得赞的数量 -->
                    <div class="reward-num">
                        <img src="./static/image/active.png" alt="" srcset="">
                        <p>{{v.likenum}}</p>
                    </div>

                    <!-- 点赞出现的心 -->
                    <div class="hearts">
                        <img v-for="h in hearts" :key="h.id" :style="{left:h.x+'px',top:h.y+'px'}"
                            src="./static/image/active.png" alt="">
                    </div>

                    <video :id="'v-'+v.id" x5-video-player-fullscreen="true" webkit-playsinline="true"
                        x-webkit-airplay="true" playsinline="true" x5-playsinline :src="v.videoUrl"
                        :poster="v.poster"></video>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <footer>
            <ul>
                <li>首页</li>
                <li>朋友</li>
                <li><img src="./static/image/kkb.png" alt=""></li>
                <li>消息</li>
                <li>我</li>
            </ul>
        </footer>
    </div>
    <!-- 获取数据 -->
    <script src="./static/data.js"></script>
    <script>
        // 获取距离屏幕左边的距离
        const screenW = document.querySelector('.swiper-container').offsetLeft
        // 创建一个应用
        const app = {
            data() {
                return {
                    videos: VIDEOS,
                    lastIndex: 0,
                    currentIndex: 0,
                    timer: null,
                    db_start: 0,
                    hearts: []
                }
            },
            mounted() {
                let _self = this
                // 初始化swiper
                var mySwiper = new Swiper('.swiper-container', {
                    direction: 'vertical', // 垂直切换选项
                    on: {
                        slideChangeTransitionEnd: function () {
                            _self.lastIndex = _self.currentIndex
                            _self.currentIndex = this.activeIndex
                            _self.switch() // 判断上一个暂停 当前播放
                        }
                    }
                })
            },
            methods: {
                // 点击播放
                playClick(id) {
                    this.videos.forEach(v => {
                        if (v.id === id) {
                            // document.querySelector('#v-' + id).play()
                            // 单击暂停
                            if (v.playing) {
                                v.playing = false
                                document.querySelector('#v-' + id).pause()
                            } else {
                                v.playing = true
                                document.querySelector('#v-' + id).play()
                            }
                        }
                    })
                },
                switch() {
                    document.querySelector('#v-' + this.lastIndex).pause()
                    document.querySelector('#v-' + this.currentIndex).play()
                    // 修改播放状态
                    this.videos.forEach(v => {
                        if (v.id === this.lastIndex) {
                            v.playing = false
                        } else if (v.id === this.currentIndex) {
                            v.playing = true
                        }
                    })

                },
                // 双击小心心
                likes(e, id) {
                    let x = e.clientX - screenW - 40
                    let y = e.clientY - 40
                    this.hearts.push({
                        x,
                        y,
                        id: new Date().getTime()
                    })
                    if (this.hearts.length > 5) {
                        this.hearts.shift()
                    }
                    this.videos.forEach(v => {
                        if (v.id === id) {
                            v.likenum++
                        }
                    })

                },
                // 判断双击还是单击事件
                dublePlay(id, e) {
                    clearTimeout(this.timer)
                    this.timer = setTimeout(() => {
                        clearTimeout(this.timer)
                        this.playClick(id)
                        this.db_start = 0
                    }, 300)
                    if (this.db_start === 0) {
                        this.db_start = new Date().getTime()
                    } else {
                        let now = new Date().getTime()
                        let del = now - this.db_start
                        if (del <= 300) {
                            // 双击
                            clearTimeout(this.timer)
                            // 小心心
                            this.likes(e, id)
                        }
                        this.db_start = 0
                    }
                }
            }
        }

        Vue.createApp(app).mount('#app')
    </script>
</body>

</html>